<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类菜单</title>
</head>
<body>
    <div class="con clearfix">
        <h1 class="pop-menu">菜单1
            <div class="menu text-menu">
            <a href="" class="text-menu-item">简单的菜单项1</a>
            <a href="" class="text-menu-item">简单的菜单项2</a>
            <div class="seperator">
            <a href="" class="text-menu-item">简单的菜单项3</a></div></div>
        </h1>
        <h1 class="pop-menu">菜单2
            <div class="menu text-menu">
            <a href="" class="text-menu-item">简单的菜单项1</a>
            <a href="" class="text-menu-item">简单的菜单项2</a>
            <div class="seperator">
            <a href="" class="text-menu-item">简单的菜单项3</a></div></div>
        </h1>
        <h1 class="pop-menu">菜单3
            <div class="menu img-menu">
                <a href=""><img src="./二维码.png" alt=""></a>
            </div>
        </h1>
        <h1 class="pop-menu">菜单4
            <div class="menu section-menu">
                在这里放各种内容<br>
                在这里放各种内容<br>
                在这里放各种内容<br>
            </div>
        </h1>
    </div>
    <div>
        后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，
        后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，后面的内容，
        后面的内容<br>
        后面的内容<br>
        后面的内容<br>
        后面的内容<br>
    </div>

    <style>
        div,h1,a{
            margin: 0;
            padding: 0;
        }

        .con{
            background-color: yellow;
        }

        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }

        .pop-menu{
            float: left;
            margin-left: 1em;
            position: relative;
        }

        .menu{
            display: none;
            position: absolute;
            top: 100%;
        }

        .text-menu{
            width: 16em;
            background-color: aquamarine;
        }

        .img-menu{
            border: 1px red;
        }

        .img-menu::after{
            content: "";
            border-right: solid 4px transparent;
            border-bottom: solid 4px red;
            border-left: solid 4px transparent;
            position: absolute;
            left:20px;
            bottom: 100%;
        }

        .section-menu{
            border: 1px gray solid;
            background-color: lightgray;
            width: 500px;
            height: 300px;
        }

        .text-menu-item{
            display: block;
            text-decoration: none;
            text-align: left;
            line-height: 2em;
        }

        .seperator{
            border-bottom: 1px solid rgb(155, 153, 153);
        }

        .text-menu-item:hover{
            color: #fff;
            background-color: rgb(43, 42, 42);
        }

        .pop-menu:hover .menu,
        .menu:hover{
            display: block;
        }
    </style>
</body>
</html>